<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Comet - webSocket</title>
</head>

<body>
    <script>
        // webSockets 的目标是在持久连接的基础上建立全双工的、双向通信。
        // 建立连接后http协议改为web Socket 协议
        // 需要专门支持web socket协议的服务器才能正常通信
        // 未保密性 http://->ws://  保密性 https://->wss://

        // 优点：不必担心http那样字节级的开销，速度快，适合于移动应用
        // 缺点：缺乏一致性和安全性; 
        window.onload = function () {
            (function () {
                // 新建一个实例，传入的url必须是绝对地址，不支持同源策略
                // 实例化了对象后便马上尝试连接，也有readyState属性
                // WebSocket.OPENING(0) 正在建立连接  WebSocket.OPEN(1)已经建立连接  
                // WebSocket.CLOSEING(2)正在关闭连接  WebSocket.CLOSEING(3)已经关闭连接
                // 没有readystatechange事件 

                var socket = new WebSocket("ws://www.example.com/server.php");

                var message = {
                    time: new Date().getTime(),
                    text: 'hello',
                }

                // 这些事件只能有DOM0级定义
                // open 在成功建立连接时触发
                socket.onopen = function () {
                    console.log("成功建立连接")
                    // 对于复杂的数据结构，必须要经过序列化
                    socket.send(JSON.stringify(message));
                };

                // error 发生错误时触发
                socket.onerror = function () {
                    console.log("连接错误")
                };

                // close 连接关闭时触发 
                // close event对象有三个属性 
                // wasClean 是否明确关闭连接 code 服务器返回的状态数值 reason一个字符串 包含服务器返回的信息
                socket.onclose = function (event) {
                    console.log("连接关闭");
                    console.log(event.wasClean+","+event.code+","+event.reason);
                };

                // message 当服务器返回信息时触发 保存在event.data中
                // 处理获得数据可能要解析下数据
                socket.onmessage = function (event) {
                    console.log(event.data)
                };

                // 要关闭websocket连接可以随时调用close()方法
                socket.close();
            })();
        }
    </script>
</body>

</html>